<template>
  <div class="page-box">
      <div class="tab-box">
        <div class="tab-item" v-if="item.level > 1" :class="item.level == member.level ? 'active' : ''" @click="tabChange(item)"  v-for="(item, index) in dataList" :key="index">{{item.name}}</div>
      </div>
      <div class="price-box">
        <div class="card-item">
          <div>1个月</div>
          <div class="price">
            <div>{{member.monthFee}}元</div>
            <div class="pay-btn" @click="payBtn(member, '0')">选择</div>
          </div>
        </div>

        <div class="card-item">
          <div>3个月（{{member.quarterDiscount}}折）</div>
          <div class="price">
            <div>{{member.quarterFee}}元</div>
            <div class="pay-btn" @click="payBtn(member, '1')">选择</div>
          </div>
        </div>

        <div class="card-item">
          <div>12个月（{{member.annualDiscount}}折）</div>
          <div class="price">
            <div>{{member.annualFee}}元</div>
            <div class="pay-btn" @click="payBtn(member, '2')">选择</div>
          </div>
        </div>

        <div class="discount-box">
          <div class="discount-label">我有折扣码</div>
          <div class="discount-input">
            <input class="input" type="text" v-model="inviteCode" placeholder="请输入折扣码" />
            <!-- <div class="update-btn">更新价格</div> -->
          </div>
        </div>

      </div>


      <div class="back-btn" @click="back">返回</div>
  </div>
</template>

<script>
  export default {
  	props: {
  		dataList: {
  			type: Array,
  			required: true,
  			default: function() {
  				return [];
  			}
  		},
  		member: {
  			type: Object,
  			required: false,
  			default: function() {
  				return {};
  			}
  		},
  	},
  	data() {
  		return {
        inviteCode: '',
  		}
  	},
  	created() {

    },
  	methods: {
  		tabChange(e) {
        this.level = e.level;
        this.member = e;
      },
      payBtn(e, memberType) {
        e.memberType = memberType;
        e.inviteCode = this.inviteCode;
        this.$emit('ok', e);
      },
      back() {
        this.$emit('back');
      },
  	}
  }
</script>

<style lang="scss" scoped>
  .page-box {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .tab-box{
    display: flex;
  }
  .tab-item {
    font-size: 12px;
    width: 100px;
    display: flex;
    justify-content: center;
    padding: 8px;
    border: 1px solid #2979ff;
    border-right: 0;
    cursor: pointer;
  }
  .tab-box .tab-item:last-child{
    border-right: 1px solid #2979ff;
  }
  .active {
    background-color: #2979ff;
    color: #fff;
  }

  .price-box {
    margin: 40px 0;
  }
  .card-item:hover {
    box-shadow: 5px 5px 10px #888888;
  }
  .card-item {
    color: #303133;
    font-size: 16px;
    width: 380px;
    border: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    margin-bottom: 10px;
  }
  .price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 200px;
  }
  .pay-btn {
    background-color: #07C160;
    padding: 10px 40px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
  }
  .discount-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
  }
  .discount-input {
    display: flex;
    align-items: center;
  }
  .discount-label {
    font-size: 16px;
    color: #303133;
  }
  .input {
    height: 30px;
    border: 1px solid #dddd;
    padding-left: 10px;
  }
  .update-btn {
    background-color: #07C160;
    padding: 5px 12px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
  }
  .back-btn {
    background-color: #2979ff;
    padding: 8px 40px;
    font-size: 14px;
    color: #fff;
    cursor: pointer;
  }
</style>
